<template>
    <div class="logins">
        <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
      >
        <el-form-item label="账号" prop="account" style="width: 300px;">
          <el-input v-model="ruleForm.account" />
        </el-form-item>
        <el-form-item label="密码" prop="password" style="width: 300px;">
          <el-input type="password"  v-model="ruleForm.password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
           登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import '../assets/styles/login.css'
  import type { FormInstance, FormRules } from 'element-plus'
  import { ElMessage } from 'element-plus'
  import ums from '../apis/user'
  const router = useRouter()
  const formSize = ref('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive({
    account: '',
    password: '',
  })
  
  const rules = reactive<FormRules>({
    account: [
      { required: true, message: '请输入账号', trigger: 'blur' },
      { min: 3, max: 15, message: '账号长度在3-15', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 3, max: 15, message: '密码长度在3-15', trigger: 'blur' },
    ],
    
  })
  
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!', ruleForm)
       ums.login(ruleForm).then((res) => {
        console.log(res);
        if(res.code==1){

          ElMessage.success('登录成功')
        // loading.value=false

            router.push('/layout')
            const {token,userInfo,permissions}=res.data
            localStorage.setItem('token',token)
            localStorage.setItem('user',JSON.stringify(userInfo))
            localStorage.setItem('per',JSON.stringify(permissions))
        }else{
         ElMessage.error('登陆失败')

        }
        
       })
        // fetch('http://jacklv.cn/users/login',{
        //         method: 'POST',
        //         body:JSON.stringify(ruleForm),
        //         headers:{
        //             'Content-Type':'application/json'
        //         }
        //     })
        //     .then(response=>response.json())
        //     .then(res=>{
        //         console.log('res',res);
        //         if(res.code==1){

        //           ElMessage.success('登录成功')
        //         // loading.value=false

        //             router.push('/layout')
        //             const {token,userInfo,permissions}=res.data
        //             localStorage.setItem('token',token)
        //             localStorage.setItem('user',JSON.stringify(userInfo))
        //             localStorage.setItem('per',JSON.stringify(permissions))
        //         }else{
        //          ElMessage.error('登陆失败')

        //         }
                
        //     })
        //     .catch(error=>{

        //         console.log('error',error);
        //         loading.value=false
                
        //     })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  

  </script>
  